<template>
  <div class="rose-echart">
    <BaseEchart :options="options"></BaseEchart>
  </div>
</template>

<script setup lang="ts">
  import {defineProps,withDefaults,computed} from 'vue'
  import BaseEchart from '@/base-ui/echart';
  import { IDataType } from '../types';
  const props = withDefaults(defineProps<
  {roseData:IDataType}
  >(),{

  })
  const options = computed(()=>{
    return {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: '类别数据',
      type: 'pie',
      radius: [10, 80],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 10
      },
      data: props.roseData
    }
  ]
};
  })

</script>

<style lang="less" scoped>

</style>